<template>

    <div>
        <div><h2><span style="margin-left: 580px">echarts图表</span></h2></div>

        <div>
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card style="width: 400px;height: 300px;margin-left: 20px;margin-top: 30px">
                        <span>柱形图</span>
                        <div style="width: auto" id="main">
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card style="width: 400px;height: 300px;margin-left: 20px;margin-top: 30px">
                        <span>堆叠柱状图</span>
                        <div style="width: auto" id="main1">
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card style="width: 400px;height: 300px;margin-left: 20px;margin-top: 30px">
                        <span>折线图</span>
                        <div style="width: auto" id="main2">
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="8">
                    <el-card style="width: 400px;height: 300px;margin-left: 20px;margin-top: 30px">
                        <span>堆叠折线图</span>
                        <div style="width: auto" id="main3"></div>
                    </el-card>
                </el-col>

                <el-col :span="8">
                    <el-card style="width: 400px;height: 300px;margin-left: 20px;margin-top: 30px">
                        <span>区域面积图</span>
                        <div style="width: auto" id="main4"></div>
                    </el-card>
                </el-col>


                <el-col :span="8">
                    <el-card style="width: 400px;height: 300px;margin-left: 20px;margin-top: 30px">
                        <span>平滑曲线图</span>
                        <div style="width: auto" id="main5"></div>
                    </el-card>
                </el-col>

                <el-col :span="8">
                    <el-card style="width: 400px;height: 300px;margin-left: 20px;margin-top: 30px">
                        <span>阶梯线图</span>
                        <div style="width: auto" id="main6"></div>
                    </el-card>
                </el-col>


                <el-col :span="8">
                    <el-card style="width: 400px;height: 300px;margin-left: 20px;margin-top: 30px">
                        <span>饼图</span>
                        <div style="width: auto" id="main7"></div>
                    </el-card>
                </el-col>


                <el-col :span="8">
                    <el-card style="width: 400px;height: 300px;margin-left: 20px;margin-top: 30px">
                        <span>散点图</span>
                        <div style="width: auto" id="main8"></div>
                    </el-card>
                </el-col>

            </el-row>
        </div>
    </div>
</template>

<script>
    import {apiDownLoad,importUpload} from '@/api/exportUpload'
    import axios from 'axios'
    export default {
        name: "Index",
        props: [ "cpDatas"],
        mounted(){

            this.echartsInit()
        },
        data() {
            return {

            }
        },
        created() {

        },
        methods: {
            //初始化echarts
            echartsInit() {
                //柱形图
                //因为初始化echarts 的时候，需要指定的容器 id='main'
                this.$echarts.init(document.getElementById('main'),null,{
                    width: 400,
                    height: 300
                }).setOption({
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }]
                })

                this.$echarts.init(document.getElementById('main1'),null,{
                    width: 400,
                    height: 300
                }).setOption({
                    xAxis: {
                        data: ['A', 'B', 'C', 'D', 'E']
                    },
                    yAxis: {},
                    series: [
                        {
                            data: [10, 22, 28, 43, 49],
                            type: 'bar',
                            stack: 'x'
                        },
                        {
                            data: [5, 4, 3, 5, 10],
                            type: 'bar',
                            stack: 'x'
                        }
                    ]
                })


                this.$echarts.init(document.getElementById('main2'),null,{
                    width: 400,
                    height: 300
                }).setOption({
                    xAxis: {
                        type: 'category',
                        data: ['A', 'B', 'C']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150],
                            type: 'line'
                        }
                    ]
                })

                this.$echarts.init(document.getElementById('main3'),null,{
                    width: 400,
                    height: 300
                }).setOption({
                    xAxis: {
                        data: ['A', 'B', 'C', 'D', 'E']
                    },
                    yAxis: {},
                    series: [
                        {
                            data: [10, 22, 28, 43, 49],
                            type: 'line',
                            stack: 'x'
                        },
                        {
                            data: [5, 4, 3, 5, 10],
                            type: 'line',
                            stack: 'x'
                        }
                    ]
                })

                this.$echarts.init(document.getElementById('main4'),null,{
                    width: 400,
                    height: 300
                }).setOption({
                    xAxis: {
                        data: ['A', 'B', 'C', 'D', 'E']
                    },
                    yAxis: {},
                    series: [
                        {
                            data: [10, 22, 28, 23, 19],
                            type: 'line',
                            areaStyle: {}
                        },
                        {
                            data: [25, 14, 23, 35, 10],
                            type: 'line',
                            areaStyle: {
                                color: '#ff0',
                                opacity: 0.5
                            }
                        }
                    ]
                })


                this.$echarts.init(document.getElementById('main5'),null,{
                    width: 400,
                    height: 300
                }).setOption({
                    xAxis: {
                        data: ['A', 'B', 'C', 'D', 'E']
                    },
                    yAxis: {},
                    series: [
                        {
                            data: [10, 22, 28, 23, 19],
                            type: 'line',
                            smooth: true
                        }
                    ]
                })


                this.$echarts.init(document.getElementById('main6'),null,{
                    width: 400,
                    height: 300
                }).setOption({
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: 'Step Start',
                            type: 'line',
                            step: 'start',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: 'Step Middle',
                            type: 'line',
                            step: 'middle',
                            data: [220, 282, 201, 234, 290, 430, 410]
                        },
                        {
                            name: 'Step End',
                            type: 'line',
                            step: 'end',
                            data: [450, 432, 401, 454, 590, 530, 510]
                        }
                    ]
                })

                this.$echarts.init(document.getElementById('main7'),null,{
                    width: 400,
                    height: 300
                }).setOption({
                    series: [
                        {
                            type: 'pie',
                            data: [
                                {
                                    value: 335,
                                    name: '直接访问'
                                },
                                {
                                    value: 234,
                                    name: '联盟广告'
                                },
                                {
                                    value: 1548,
                                    name: '搜索引擎'
                                }
                            ]
                        }
                    ]
                })


                this.$echarts.init(document.getElementById('main8'),null,{
                    width: 400,
                    height: 300
                }).setOption({
                    xAxis: {
                        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
                    },
                    yAxis: {},
                    series: [
                        {
                            type: 'scatter',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        }
                    ]
                })

            },

        }

    }
</script>

<style scoped lang="scss">





</style>
